'use strict';
import React, {Component} from 'react'
import {Link, hashHistory} from 'react-router'

import {HttpService, Tips, pageData, imgonError,GetDateStr} from '../Tools'
import Header from './Common/Header'

import '../Scss/devices'
import defaultHeadImg from '../Img/icon/defaultHeadImg.png'

export default class Devices extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataAllList: [], //学生列表-所有的
            dataList: [], //学生列表-显示的
            clean: 0, //清空搜索框按钮状态
        };
    }
    componentWillMount() {
        // /**
        //  * 测试-先登录获取token
        //  * 线上通过url中获取
        //  */
        // HttpService.query({
        //     url: '/teacherapp/teacher/login',
        //     data: {
        //         account: '18781999552',//15902823453 18781999552  15928186711
        //         password: '654321',//12345678  123456789  123456
        //         weixinclient: 'true',
        //         openid: ''
        //     },
        //     async: false,
        //     success: (res => {
        //         if(res.code == 20002)
        //             localStorage.appToken = res.data.token;
        //         else
        //             Tips(res.msg);
        //     })
        // });
        let rct = this;
        if (this.props.params.token != undefined) {
            if (pageData.Devices != '') {
                this.setState({dataList: pageData.Devices, dataAllList: pageData.Devices});
                return;
            }
            /**
             * 家长token转教师token
             */
            HttpService.query({
                url: '/apph5/user/changeToken',
                data: {
                    token:this.props.params.token
                },
                //async: false,
                success: (res => {
                    if(res.code == 10140){
                        localStorage.appToken = res.data.token;//存教师token
                        /**
                         * 请求考勤列表获取学生信息
                         */
                        HttpService.query({
                            url: '/teacherapp/student/getAttendanceList',
                            data: {
                                token: localStorage.appToken,
                                date: GetDateStr(0)
                            },
                            //async: false,
                            success: (res => {
                                if (res.code == '20020') {
                                    pageData.Devices = res.data;
                                    rct.setState({dataList: res.data, dataAllList: res.data})
                                } else {
                                    Tips('未获取到学生列表', 0);
                                }
                            })
                        });
                    }else{
                        Tips('非教师账户或登录已过期');
                    }
                })
            });

        } else {
            Tips('没有token值', 0);
        }
    }
    /**
     * 搜索
     * @param e
     */
    smtSelect(e) {
        e.preventDefault();
        this.getQuerySekect(document.querySelector('#schtxt').value);
    }

    /**
     * 数据排列
     * @param queryValue
     */
    getQuerySekect(queryValue) {
        if (queryValue == '') {
            this.setState({dataList: this.state.dataAllList, clean: 0});
        } else {
            let dataAllList = this.state.dataAllList;
            this.state.dataList = [];
            for (let j = 0; j < dataAllList.length; j++) {
                let realname = dataAllList[j].realname;
                if (realname.indexOf(queryValue) > -1) {
                    this.state.dataList.push(dataAllList[j]);
                }
            }
            this.setState({dataList: this.state.dataList, clean: 1});
        }
    }
    //清空数据
    cleanTxt() {
        document.getElementById('schtxt').value = '';
        this.setState({dataList: this.state.dataAllList, clean: 0});
    }
    /**
     * 点击定位
     * @param info
     */
    location(info) {
        let headimg = defaultHeadImg.replace(/\//g, '*');
        if (info.headimg.replace(/\//g, '*') != '') {
            headimg = info.headimg.replace(/\//g, '*');
        }
        // hashHistory.push('/mapDetail/'+ info.studentid +'/'+info.realname+'/'+ headimg);//把斜杠换成星号
        if (info.devicetype == 3) {
            Tips('当前学生为考勤卡，无定位信息');
        } else {
            hashHistory.push('/mapDetail/' + info.studentid + '/' + info.realname + '/' + headimg); //把斜杠换成星号
        }
    }
    /**
     * 点击打电话-为考勤卡触发
     */
    callPhone() {
        Tips('当前学生为考勤卡，无法进行通话');
    }

    // imgonError(e){
    //     e.target.setAttribute('src',defaultHeadImg);
    // }
    render() {
        let dataLists = this.state.dataList.map((item) => {
            let headimg = item.headimg == null || 'media/' + item.headimg == ''
                ? defaultHeadImg
                : 'media/' + item.headimg;
            return (
                <li>
                    <img src={headimg} onError={imgonError.bind(this, defaultHeadImg)}/>
                    <span className='name'>{item.realname}</span>
                    {item.devicetype == 3
                        ? <span className='tel gary' onClick={this.callPhone.bind(this)}>电话</span>
                        : <a className='tel' href={'tel:' + item.telephone}>电话</a>
}
                    <span className={item.devicetype == 3?'position gary':'position'} onClick={this.location.bind(this, item)}>定位</span>
                </li>
            )
        });
        return (
            <div className='devices' id='devices'>
                <Header title='学生定位'/>
                <form onSubmit={this.smtSelect.bind(this)} action='' className='search'>
                    <input type='search' placeholder='搜索学生姓名' id='schtxt' className='txt' ref='schtxt' onChange={this.smtSelect.bind(this)}/> {this.state.clean == '1'
                        ? <span className='clean' onClick={this.cleanTxt.bind(this)} id='clean'></span>
                        : ''
}
                </form>
                <ul className='datalist'>
                    {dataLists == ''
                        ? <p className="noData">暂无学生信息</p>
                        : dataLists
}
                </ul>
            </div>
        )
    }
}
